<template>
    <div class="goodsinfo-container">

      <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
          <div class="ball" v-show="ballFlag" ref="ball"></div>
      </transition>

        <!-- 商品轮播图区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <!-- 轮播图 区域 -->
				        <swiper :lunbotulist="lunbotuList" :isfull="false"></swiper>
                    </div>
				</div>
		</div>

        <!-- 商品购买区域 -->
    <div class="mui-card">
				<div class="mui-card-header">{{goodsMessage[0].title}}--------{{selectedCount}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <p>
                            市场价：<del>￥{{goodsMessage[0].old_money}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodsMessage[0].new_money}}</span>
                        </p>
                        <p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsMessage[0].good_stock"></numbox></p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <!-- 分析：如何实现加入购物车时，拿到选择的数量
                              1. 发现，按钮属于 goodsinfo 页面，数字属于 numberbox 组件
                              2. 由于涉及到父子组件的嵌套，所以无法直接在goodsinfo页面中获取 选中的商品数量值
                              3. 涉及到了 子组件向父组件传值（事件调用机制） 
                              4. 事件调用的本质 ： 父向子传递方法，子调用这个方法，同时把数据当做参数传递给这个方法
                         -->


                        </p>
					</div>
				</div>
		</div>

        <!-- 商品参数区域 -->
    <div class="mui-card">
				<div class="mui-card-header">商品参数---{{id}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsMessage[0].good_number}}</p>
						<p>库存情况:{{goodsMessage[0].good_stock}}件</p>
						<p>上架时间:{{goodsMessage[0].add_time |dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain  @click="goComment(id)">商品评论</mt-button>
                </div>
		</div>



        
    </div>
</template>
<script>
// 导入轮播图组件
import swiper from "../subcomponents/swiper.vue";
// 导入 数字选择框 组件
import numbox from "../subcomponents/goodsinfo_numbox.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      // 获取得到的轮播图数据
      lunbotuList: [
        {
          pid: 1,
          img_name: "zhangsan",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg"
        },
        {
          pid: 2,
          img_name: "lisi",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476438076&di=6fcd124af750ba621ce0e43f5bf25732&imgtype=0&src=http%3A%2F%2Fwww.m1ok.com%2Fupload%2Fnetpic2%2F2017-06-28-10-59-5262650279229.jpg"
        },
        {
          pid: 3,
          img_name: "wangwu",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476453371&di=bea1e6b95f94e7238e73ad8bc213807a&imgtype=0&src=http%3A%2F%2Fimg06.tooopen.com%2Fimages%2F20170221%2Ftooopen_sy_199240913125.jpg"
        },
        {
          pid: 4,
          img_name: "w111angwu",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476453371&di=bea1e6b95f94e7238e73ad8bc213807a&imgtype=0&src=http%3A%2F%2Fimg06.tooopen.com%2Fimages%2F20170221%2Ftooopen_sy_199240913125.jpg"
        }
      ],
      // 控制小球隐藏和显示标识符
      ballFlag: false,
      // 获取商品名称价格商品参数等的数据
      goodsMessage: [
        {
          title: "这是商品详情里的标题",
          new_money: 2000,
          old_money: 3520,
          add_time: "2017/03/07 05:05:20",
          good_number: "SD12345678",
          good_stock: 20
        }
      ],
      // 保存用户选中的商品数量，默认认为用户买1个
      selectedCount:1,
    };
  },
  created() {},
  methods: {
    getGoodsList() {
      // 使用数据库数据
      // this.$http.get("'api/getgoodsinfo/' + this.id ").then(result=>{
      //     if(result.body.status === 0){
      //         // 先循环轮播图数组的每一项，为item添加img属性，因为 轮播图 组件中，只认识 item.img 不认识 item.src 属性
      //         // 为 item 增加一个img 属性，内容等于item.src
      //         result.body.message.foreach(item=>{
      //             item.img =item.src;
      //         });
      //         把数据值赋值给data中的lunbotulist数组
      //         this.lunbotuList = result.body.message;
      //     }
      // })
    },
    // 编程式导航 跳转到 图文介绍页面
    goDesc(id) {
      this.$router.push({ name: "goodsdesc", params: { id } });
    },
    // 点击跳转到评论页面
    goComment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },
    // 添加到购物车
    addToShopCar() {
      this.ballFlag = !this.ballFlag;
      // 拼接处一个要保存到 store 中的 car 数组中的商品信息对象
      //{id:商品的id,count:要购买的数量,price:商品的单价,selected:true}
      var goodsinfo ={id:this.id,count:this.selectedCount,price:this.goodsMessage[0].new_money,selected:true};
      this.$store.commit("addToCar",goodsinfo)
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)";
    },
    enter(el,done){
      el.offsetWidth;
      // 小球动画优化思路：
      /*  1.  分析导致， 动画不准确的本质原因，：我们把小球最终位移到的位置，已经局限在了某一分辨率下，滚动条未滚动的情况下；
          2. 只要分辨率和测试的时候不一样忙活着 滚动条有一定的滚动距离之后，问题就出现了
          3. 因此，经过分析，得到绝伦，不能把位置的横纵坐标直接写死，而是应该根据不同情况，动态计算坐标值

          4. 经过分析，得到思路： 先得到徽标 的 横纵左边，再得到小球的横纵坐标，然后让 Y 值 求差，x 值也求差，得到的结果就说要位移的距离
          5. 如何获取 徽标和小球的位置 domObject.getBoundingRect()
      */
     // 获取小球在页面中的位置
     const ballPosition = this.$refs.ball.getBoundingClientRect();
     // 获取 徽标 在一面中的位置
     const badgePosition = document.getElementById('badge').getBoundingClientRect();

     const xDist = badgePosition.left - ballPosition.left;
     const yDist = badgePosition.top - ballPosition.top;


      el.style.transform=`translate(${xDist}px,${yDist}px)`;
      el.style.transition ="all 0.4s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(el){
      this.ballFlag = !this.ballFlag;
    },

    // 购买增加数量
    getSelectedCount(count){
      //当子组件把选中的数量传递给父组件的时候，把选中的值保存在data上
      this.selectedCount = count;
      
    }
  },
  components: {
    swiper,
    numbox
  }
};
</script>   

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eeeeee;
  overflow: hidden;
  padding-bottom: 45px;
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 400px;
    left: 140px;
  
  }
}
</style>

